<template>
	<view class="send">
		<view class="head">
			<view>个人码申请历史记录</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>
     
		<view class="info-form">
			<uni-table border stripe emptyText="暂无数据"  class="my-table">
				<!-- 表头行 -->
				<uni-tr>
					
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">申请理由</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">联系电话</uni-th>
					
					<uni-th align="center">回绝理由</uni-th>
			
					<uni-th align="center">申请时间</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(v, key) in tableData" :key="key">
					<uni-td>{{ v.userName }}</uni-td>
					<uni-td>{{ v.applyReason }}</uni-td>
					<uni-td>{{ applyStateMap[v.applyState] }}</uni-td>
					<uni-td>{{ v.phone }}</uni-td>
					<uni-td>{{ v.refuseReason }}</uni-td>
					<uni-td>{{ v.applyTime }}</uni-td>
				</uni-tr>
			
			</uni-table>

		</view>
	</view>
</template>


<script>
	import * as api from '../../utils/api.js';

	export default {
	
		data() {
			return {	
				userInfo: { codeState: 0, applyCode: null }, // 进来就调用一次
				tableData: [],
				applyStateMap: {'0': '未申请', '1': '审核中', '2': '申请成功', '3': '申请失败'}

			}
		},
			
		computed: {
			
		},
		onLoad() {
			this.getTableData();
		},
	
		methods: {
			
			async getTableData () {
			    const res = await api.getUserRequestDiversionCodeInfo();
				this.tableData =  res.data || [];
			},
		
	
			back() {
				uni.navigateBack()
			},
	

		},
		
	}
</script>

<style lang="scss">
	.send {
		color: white;
		padding: 40rpx 20rpx;
		align-items: center;


		.circle-btn {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #e5b44d;
			text-align: center;
			line-height: 120rpx;

			.txt {
				color: black;
				font-size: 46rpx;
			}
		}

		.sqaure-btn {
			width: 90rpx;
			height: 90rpx;
			border-radius: 8rpx;
			background-color: yellow;
			text-align: center;
			line-height: 90rpx;
			font-size: 40rpx;
			background-color: rgba(0, 0, 0, 1);

			.txt {
				color: white;
			}
		}

		.linear-gradient-back {
			background: linear-gradient(to bottom right, #f2ebce, #856925);
		}

		.linear-gradient-order {
			background: linear-gradient(to bottom right, #ede5c1, #f8ce3d);
		}

		.head {
			display: flex;
			padding: 40rpx 10rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 46rpx;
		}

		.info-form {
			font-size: 30rpx;
			padding: 40rpx 10rpx;
			border-radius: 10rpx;			
		}

		::v-deep .uni-table {
			background-color: rgba(0, 0, 0, 0.3);
		}
        ::v-deep  .uni-tr {
			color: #fff;
		}
	}
</style>